<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .box{
                width: 260px;
                height: 260px;
                background-color: #f00;
                margin-bottom: 20px;
            }
            .art_context2{
                background: #fff;
                padding: 20px;
                box-sizing: border-box;
                margin: 80px auto 20px auto;
                max-width: 1000px;
            }
            .shadowdemo {
                display: inline-block;
                line-height: 33px;
                height: 36px;
                padding: 0 2em;
                font-size: 13px;
                background: #0C58A7;
                box-shadow: inset -3px -3px 2px #050533;
                text-decoration: none;
                color: #fff;
                border-radius: 4px;
                vertical-align: middle;
            }
            .shadowdemo:active{
               line-height: 39px;
               box-shadow:inset 2px 3px 2px #050533;
            }
            .b3dbtn {
                display: inline-block;
                line-height: 29px;
                height: 32px;
                padding: 0 1.4em;
                font-size: 13px;
                background: #07A725;
                color: #fff;
                box-shadow: inset -2px -3px 2px #025712;
                border-radius: 3px;
                vertical-align: middle;
            }
            .b3dbtn:active{
                line-height: 35px;
                box-shadow: inset 2px 3px 2px #025712;
            }
            a + a {
                margin-left: 8px;
            }
            a {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="art_context2">
            <a href="javascript:;" class="shadowdemo">我是按钮</a>
            <a href="javascript:;" class="b3dbtn">我也是按钮</a>
        </div>
    </body>
</html>